<!-- 登录页面 -->
<template>
  <div>
    <div class="form-class">
      <img class="logo" src="../assets/logo.png" alt />
      <el-card>
        <el-form :model="form" :rules="rules" ref="form" label-width="80px">
          <!-- 点击忘记密码时隐藏 -->
          <div v-if="!forgetPwd">
            <el-form-item label="账号" prop="username">
              <el-input v-model="form.username" />
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input
                type="password"
                v-model="form.password"
                @keyup.native.enter="submit"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                @click="submit"
                :loading="load"
                style="width: 100%"
                >{{ loginText }}</el-button
              >
              <el-button type="text" @click="forget">忘记密码</el-button>
            </el-form-item>
          </div>
          <!-- 点击忘记密码时显示 -->
          <div v-else>
            <el-form-item label="邮箱" prop="email">
              <el-input
                v-model="form.email"
                placeholder="请输入忘记密码的账号绑定的邮箱"
              />
            </el-form-item>
            <el-button type="primary" @click="findPassword" style="width: 100%"
              >找回密码</el-button
            >
          </div>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},

  data() {
    //这里存放数据
    return {
      // 表单对象
      form: {
        username: null,
        password: null,
      },
      // 检验规则
      rules: {
        username: [
          { required: true, message: "请输入账号", trigger: "blur" },
          {
            min: 2,
            max: 20,
            message: "长度在 2 到 20 个字符",
            trigger: "blur",
          },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"],
          },
        ],
      },
      // 登录按钮文字
      loginText: "登 录",
      // 登录状态
      load: false,
      // 忘记密码
      forgetPwd: false,
    };
  },

  //方法集合
  methods: {
    // 提交登录方法
    submit() {
      // 表单校验
      this.$refs.form.validate((valid) => {
        if (!valid)
          return this.$message.error("数据校验失败，请检查后再提交！");
        // 修改按钮样式
        this.loginText = "登录中...";
        this.load = true;
        // 如果数据检验成功，则向后端发送请求，进行登录
        this.$ajax
          .post("/user/login", this.form)
          .then((res) => {
            const tokenBody = res.data;
            let tokenHead = tokenBody.tokenHead;
            let token = tokenBody.token;
            this.$store.commit("setToken", tokenHead + token);
            this.$router.push("/");
          })
          .catch(() => {
            // 修改按钮样式
            this.loginText = "登 录";
            this.load = false;
          });
      });
    },

    // 忘记密码，邮箱找回
    forget() {
      this.forgetPwd = true;
    },

    // 找回密码 发送邮件
    findPassword() {
      // 表单校验
      this.$refs.form.validate((valid) => {
        if (!valid)
          return this.$message.error("数据校验失败，请检查后再提交！");
        // 如果数据检验成功，则向后端发送请求
        this.$ajax
          .post("/tool/forget/password", {
            receivers: [this.form.email],
          })
          .then((res) => {
            if (res.flag) {
              this.$message.success(res.message);
              this.forgetPwd = false;
            }
          });
      });
    },
  },

  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
};
</script>

<style scoped>
.form-class {
  width: 30%;
  margin: 200px 500px auto;
}
.logo {
  width: 100px;
  height: 100px;
}
</style>
